<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta charset="utf-8">
		<title>统计</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/statistics/reset.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/statistics/tongji.css" />
		<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
	</head>
	<body>
		<section class="content">
			<ul class="contentA clearfix">
			 	<li class="fl">订单统计报表</li>
			 	<!-- <li class="fl">地区统计报表</li>
			 	<li class="fl word1">商品销售报表</li>
			 	<li class="fl">代理商订货报表</li> -->
		    </ul>
		    <div class="contentB clearfix">
		    	<ul class="fl">
		    		<li>本周</li>
		    		<li>上周</li>
		    		<li class="word2">本月</li>
		    		<li>上月</li>
		    	</ul>
		    	<div class="fr">
		    		<span>时段选择</span>
		    		<p>
		    			<span>2017-04-06</span>
		    			<img src="${pageContext.request.contextPath}/images/img/riqi.png" alt="" />
		    		</p>
		    		<span class="words">至</span>
		    		<p>
		    			<span>2017-04-06</span>
		    			<img src="${pageContext.request.contextPath}/images/img/riqi.png" alt="" />
		    		</p>
		    		<button type="button">查询</button>
		    		<a href="javascript:;">
		    			<img src="${pageContext.request.contextPath}/images/img/daochu.png" alt="" />
		    			<span>导出</span>
		    		</a>
		    	</div>
		    </div>
		    <ul class="contentC clearfix">
		    	<li class="fl">
		    		<p>订货单</p>
		    		<p>1笔</p>
		    	</li>
		    	<li class="fl">
		    		<p>退货单</p>
		    		<p>0笔</p>
		    	</li>
		    	<li class="fr jine">
		    		<p>金额合计</p>
		    		<p class="colore">¥30000.00</p>
		    	</li>
		    	<li class="fr">
		    		<p>退货金额</p>
		    		<p>¥0.00</p>
		    	</li>
		    	<li class="fr">
		    		<p>订货金额</p>
		    		<p>¥30000.00</p>
		    	</li>
		    </ul>
		    <div class="contentD">
		    	<input type="radio" name="tongji"/>
		    	<img src="${pageContext.request.contextPath}/images/img/danxuan1.png" alt="" />
		    	<span>按商品统计</span>
		    	<input type="radio" name="tongji"/>
		    	<img src="${pageContext.request.contextPath}/images/img/danxuan1.png" alt="" />
		    	<span>按分类统计</span>
		    </div>
		    <ul class="contentE clearfix">
		    	<li class="fl contentE_img"><img src="${pageContext.request.contextPath}/images/img/tongjitu.png" alt="" /></li>
		    	
		    	<li class="fl contentE_word">
		    		<p class="clearfix">
		    			<b class="fl"></b>
		    			<span class="fl">华为手机  [双摄像头， 内存：16G]</span>
		    		</p>
		    		<p class="clearfix">
		    			<!-- <b class="fl"></b> -->
		    			<b class="fl"></b>
		    			<span class="fl">oppo [双摄像头， 内存：64G]</span>
		    		</p>
		    		<!-- <p class="clearfix">
		    			<i class="fl"></i>
		    			<span class="fl">Apple iPad mini ME280CHLA 配备Retina显示屏7.9英寸平板电脑[颜色：金色， 内存：64G]</span>
		    		</p> -->
		    		
		    	</li>
		    	<li class="fr">
		    		<p>
		    			<span>¥28，868.75</span>
		    			<span>68.34%</span>
		    		</p>
		    		<p>
		    			<span>¥9，131.25</span>
		    			<span>31.66%</span>
		    		</p>
		    	</li>
		    </ul>
		    
		    <ul class="contentF">
		    	<li class="contentF_three">
		    		<p class="contentF_one">日期2017-07-01~2017-07-02</p>
		    		<p class="contentF_two">订货笔数</p>
		    		<p class="contentF_two">退货笔数</p>
		    		<p class="contentF_two">订货数量</p>
		    		<p class="contentF_two">退货数量</p>
		    		<p class="contentF_two">订货金额</p>
		    		<p class="contentF_two">退货金额</p>
		    		<p class="contentF_two">金额小计</p>
		    	</li>
		    	<li>
		    		<p class="contentF_one">
		    			<span>1</span> 
		    			<span>华为手机  [双摄像头， 内存：16G] </span>
		    		</p>
		    		
		    		<p >1</p>
		    		<p >0</p>
		    		<p >5</p>
		    		<p >0</p>
		    		<p>¥19,868.75</p>
		    		<p>¥0.00</p>
		    		<p>¥19,868.75</p>
		    	</li>
		    	<li>
		    		<p class="contentF_one">
		    			<span>2</span> 
		    			<span>oppo [双摄像头， 内存：64G] </span>
		    		</p>
		    		
		    		<p >1</p>
		    		<p >0</p>
		    		<p >5</p>
		    		<p >0</p>
		    		<p>¥19,868.75</p>
		    		<p>¥0.00</p>
		    		<p>¥19,868.75</p>
		    	</li>
		    	
		    	<!-- <li class="contentF_four">
		    		<p class="contentF_one ">
		    			<span >2</span>
		    			<span class="woed">AppleiPad mini 
		    			ME280CHLA 配备Retina显示屏7.9英寸平板电脑[颜色：金色， 内存：64G]
		    			</span>
		    		</p>
		    		
		    		<p >1</p>
		    		<p >0</p>
		    		<p >5</p>
		    		<p >0</p>
		    		<p>¥10,131.25</p>
		    		<p>¥0.00</p>
		    		<p>¥10,131.25</p>
		    	</li> -->
		    	<li class="contentF_three contentF_five clearfix">
		    		<p class="contentF_one">总计<span>2</span>条</p>
		    		<p>
		    			<span>每页</span>10
		    			<!-- <select name="">
		    				<option >10</option>
		    				<option >20</option>
		    				<option >30</option>
		    			</select> -->
		    			<span>条</span>
		    			<span>第</span>
		    			<a href="#">1</a>
		    			<span>页</span>
		    			<span>共<i>1</i>页</span>
		    		</p>
		    		<a href="#" class="fr"><img src="${pageContext.request.contextPath}/images/img/right.png" alt="" /></a>
		    		<a href="#" class="fr"><img src="${pageContext.request.contextPath}/images/img/left.png" alt="" /></a>
		    		
		    	</li>
		    	
		    	
		    </ul>
		</section>
		</body>
		
<%--  <script type="text/javascript" src="${pageContext.request.contextPath}/js/tongji.js"></script>
 --%>	
	<script type="text/javascript">
	
	$(function(){
		$('.contentA li').click(function(){
			$('.contentA li').removeClass('word1');
			$(this).addClass('word1');
		});
		$('.contentB ul li').click(function(){
			$('.contentB ul li').removeClass('word2');
			$(this).addClass('word2');
		});
		var index = 0;
		$('.contentD input').click(function(){
				for (var i=0;i<$('.contentD input').length;i++) {
					index = $('.contentD input').index(this);
				}
				console.log($(this).prop('checked'));
				if($(this).prop('checked')==true){
					$(this).prop('checked',true);
					$('.contentD img').eq(index).attr('src','${pageContext.request.contextPath}/images/img/danxuan.png');
					$(this).siblings('input').prop('checked',false);
					$('.contentD img').eq(index).siblings('img').attr('src','${pageContext.request.contextPath}/images/img/danxuan1.png')
				}else{
					$(this).prop('checked',false);
					$('.contentD img').eq(index).attr('src','${pageContext.request.contextPath}/images/img/danxuan1.png')
				}
			});
		});
	
	
	
	
	</script>
	

</html>
